<template>
	<div>
		<div class="panel panel-default" v-for="(item,index) in state.articles" :key="index" @click="detail(item._id)" :id="item._id">
			<div class="panel-heading">
				<h3 class="panel-title">{{item.title}}</h3>
			</div>
			<div class="panel-body">
				{{item.body}}
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		onMounted
	} from 'vue'

	import {
		useRouter
	} from 'vue-router';

	const router = useRouter()
	const props = defineProps({
		list: {
			type: Object,
			default: () => []
		}
	})

	const state = reactive({
		articles: ref([])
	})
	onMounted(() => {
		state.articles = props.list
	})
	watch(
		() => props.list,
		val => {
			state.articles = props.list
		}, {
			deep: true,
			immediate: true
		}
	)
	const detail = (id) => {
		router.push({
			path: '/detail',
			query: {
				id
			}
		})
	}
</script>

<style>
</style>
